<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Poi点</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [120.152925, 30.248748, 1500], //相机的位置  
        lookAt: [120.152925, 30.248748, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 21, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        maxSlopeAngle: 80, //地图最大倾斜角度
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });
    addPOI(new GE.Point(120.152925, 30.248748, 0), 'Hello World 1',); //添加poi
    addPOI(new GE.Point(120.156925, 30.248748, 0), 'Hello World 2',); //添加poi

    function addPOI(point, name) {
        let poi = new GE.Poi({
            url: ' http://localhost:9000/examples/resources/images/warn.png',
            // url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/images/tower.png', //模型图片路径
            position: point, //POI位置，不传就是0,0,0原点
            name: name, //'POI的名字', //显示的文字名称
            strokeStyle: '#000000', //文字描边颜色
            strokeWidth: 5, //文字描边宽度
            size: 1000, //文字大小
            isBold: true, //是否加粗
            baseImageSize: 1200, //图片大小（长宽一致，都是这个值）
            showText: true,//是否显示文字
            textStyle: '#DC143C',//字体颜色
            // textstyle: '#00FF0000',//字体颜色
            textfont: 'sans-serif',//字体格式 字体的支持情况跟操作系统和浏览器环境有关，sans-serif是默认字体都支持，其余字体不保证正常显示
            center: [0.5, 0.0], //POI的锚点,用于控制POI位置的偏移，默认是[0.5, 0.5]居中，如果是[0, 0]则在左下角显示，[1, 1]则在右上角显示
            backGroundStyle: '#00008B'
        })
        app.add(poi);

        poi.setClick = function (e) {
            console.log(e.object.name);
        }
    }

    // window.app.on('Click', function (e) {
    //     console.log(e);
    // });

    // window.app.on('Click', function (e) {
    //     // console.log(e);
    //     let curObj = e.object;
    //     while (curObj) {
    //         if (curObj instanceof GE.Poi) {
    //             console.log('this is a POI');
    //             return;
    //         }
    //         curObj = curObj.parent;
    //     }
    // });

    // poi.setClick = function (e) {
    //     console.log(e.object.name);
    // }

</script>

</html>